<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            padding: 30px 20px;
            background-color: antiquewhite;
        }

        .box .top {
            display: flex;
            justify-content: space-between
        }

        .box .one {
            display: flex;
            margin: 20px 0;
            position: relative;
        }

        .box .one img {
            width: 80px;
            margin-right: 20px;
        }

        .box .one .zhong {
            flex: 1;
        }

        .box .one .zhong h4 {
            margin-bottom: 30px;
        }

        .box .one .zhong p {
            color: orangered;
        }

        .box .one .zhong span {
            color: rgb(168, 164, 163);
            font-size: 12px;
        }

        .box .one .xia {
            position: absolute;
            bottom: 2px;
            right: 2px;
        }

        .box .one .xia button {
            width: 30px;
            height: 30px;
            font-size: 20px;
            border-radius: 50%;
            margin: 0 10px;
            color: blue;
            border: 1px solid blue;
        }

        .box .one .xia button:nth-child(2) {
            color: white;
            background-color: blue;
            border: 1px solid blue;
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div class="box" id="app">
        <div class="top">
            <h2>已选商品(<span v-text="computedcount"></span>)</h2>
            <p @click="clear()">清空</p>
        </div>
        <div class="list" v-for="(item,index) in tasklist" :key="index">
            <div class="one">
                <img :src="item.pic" alt="">
                <div class="zhong">
                    <h4 class="yu">{{item.yu}}</h4>
                    <p class="money"> ￥{{item.money}}<span class="qian">￥{{item.qian}}</span> </p>
                </div>
                <div class="xia">
                    <button @click="item.number--" :disabled="item.number===1">-</button>
                    <span>{{item.number}}</span>
                    <button @click="item.number++" :disabled="item.number===item.limit">+</button>
                </div>
            </div>
        </div>
        <div class="bottom">
            <span>总金额：{{ computedSum }}元 </span>
            <span>去结算</span>
        </div>

    </div>
</body>

</html>
<script src="./js/vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#app',
        data: {
            tasklist: [
                { id: '1', pic: './img/yu1.jpg', yu: '秋刀鱼/斤', money: '35.00', qian: '35', number: 2, limit: 5 },//limit: 5限购数量
                { id: '2', pic: './img/yu2.jpg', yu: '鲜大带鱼/条', money: '45.00', qian: '45', number: 1, limit: 5 },
                { id: '3', pic: './img/pipixia.jpg', yu: '鲜活全母皮皮虾/斤', money: '85.00', qian: '85', number: 3, limit: 5 },
                { id: '4', pic: './img/baoyu.jpg', yu: '13-15头鲍鱼/只', money: '199.00', qian: '199', number: 4, limit: 5 }
            ]
        },
        methods: {
            clear() {
                this.tasklist = []
            }

        },
        computed: {//定义计算属性，这个渲染到页面上不用加()
            // computedSum() {//总价
            //     let total = 0
            //     //累加计算 tasklist 数组的每一项的 价格*数量
            //     this.tasklist.forEach(item => {
            //         total += item.money * item.number
            //     });
            //     return total
            // },
            // computedcount() {//总数
            //     let number = 0
            //     this.tasklist.forEach((item, index) => {
            //         number += item.number
            //     })
            //     return number
            // },
            computedSum() {//总价
                return this.tasklist.reduce((prev, item) => {
                    return prev + item.money * item.number
                }, 0)
            },
            computedcount() {//总数

                return this.tasklist.reduce((prev, item) => {
                    return prev + item.number
                }, 0)
            },


        }

    })
</script>